import React, {useEffect} from 'react';
import { useState } from 'react';
import "./index.css"
import { Button, Input,Space,message } from 'antd'
import {UserOutlined} from "@ant-design/icons";
import { PoweroffOutlined } from '@ant-design/icons';
import axios from "axios";
import {ProxyConfigClass} from "../../../Util/Proxy";
import {useNavigate} from "react-router-dom";
import cookie from 'react-cookies';
const Index = (req) => {
    useEffect(
        ()=>{
            console.log(req)
        },[]
    )
    const navigate = useNavigate();
    var  [loadings] = useState([]);
    var [passwordVisible, setPasswordVisible,username,password] = React.useState(false);
    var urlPrefix="/api"
    const enterLoading = () => {
        const name=username.input.value
        const  pawd=password.input.value
        if (!ProxyConfigClass.isProxy) {
            urlPrefix=ProxyConfigClass.isGoLongUrt
        }
        axios.post(urlPrefix+"/login/login",{
            data:{
                username:name,
                password:pawd
            }
        }).then(function (response) {
            var res = response.data;
            console.log(res.token)
            if(res.msg===("success")) {
                // console.log(res.permissions)
                req.set(res.permissions)
                cookie.save('Token', res.token);
                navigate("/navigation",{
                    state:{
                        ...res
                    }
                })
                message.success(res.name+"成功登录,祝您使用愉快！")

            }else  {
                alert(res.msg)
            }
        }).catch(function (error) {
                alert(error);
        });
    }

    return (
        <div>
            <Input size="50px,50px,50px" placeholder="用戶名" prefix={<UserOutlined />} style={{width:275,height:35}} ref={(c)=>{username=c}}/>
            <br/>
            <br/>
            <Space direction="horizontal">
                <Input.Password
                    placeholder="密码"

                    visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }} ref={(c)=>{password=c}}
                style={{
                    height:35
                }}
                />

                <Button
                    type="primary"
                    icon={<PoweroffOutlined />}
                    loading={loadings[1]}
                    onClick={() => enterLoading()}
                >
                    登录
                </Button>
            </Space>
        </div>
    );
};

export default Index